<template>
	<view class="comment-input flex--col">
		<view class="comment-input-question">	
			<text class="question-title text--secondary-dark">
				<slot></slot>
			</text>
			<view class="question-point flex--row">
				<text class="question-point-item text--thirdary-dark" 
					  v-for="category in categories"
				      :class="{'active': isSelected(category)}"
					  @click.stop="handleSelect(category)"
					  role="button"
					   >
					{{ category.name || category}}
				</text>
			</view>
		</view>
		<view class="comment-content-item flex--col">
			<view class="flex--col comment-input-content" v-for="(category,index) in selectedCategories" :key="index">
				<view class="input-item" >
					<text class="text--thirdary-grey">
						[{{category.name || category.label}}]
					</text>
					<textarea @input="handleInput" @focus="handleFocus(index)" placeholder="写点什么吧" v-model="category.comment" auto-height></textarea>
				</view>
				<view class="comment-input-images flex--row" v-show="selectedCategories[index].imgList.length > 0">
					<image :src="image.src" class="comment-image" v-for="(image,index) in selectedCategories[index].imgList" mode="aspectFill" :key="index" @click="removeImage(index)" aria-label="您上传的图片 双击移除图片"></image>
				</view>
			</view>
		</view>
		<view class="flex--row comment-score" v-show="type === 'user'">
			<ScoreBar :score="score" @changeScore="changeScore"></ScoreBar>
			<text class="text--secondary-dark">{{score}}</text>
		</view>
		<view class="flex--row comment-upload" v-show="type === 'spot' && curIndex !== -1">
			<image src="@/static/comment/upload.svg" class="icon" @click.stop="addImage" role="button" aria-label="添加图片"></image>
		</view>	
		
	</view>
</template>

<script>
	import ScoreBar from "./ScoreBar.vue"
	import * as CommonApi from "@/api/common/common.js"
	export default{
		emits:['refreshComment','changeScore'],
		props:['categories','type','score'],
		components:{
			ScoreBar	
		},
		data(){
			return {
				selectedCategories:[],	
				curIndex:-1,
				
			}
		},
		methods:{
			handleSelect(category){
				const index = this.isSelected(category)
				if(index){
					this.selectedCategories.splice(index-1,1)
					return
				}
				this.selectedCategories.push(this.processComment(category))
				
			},
			handleInput(){
				this.$emit('refreshComment',this.type,this.selectedCategories)
			},
			handleFocus(index){
				this.curIndex = index
			},
			addImage(){
				const app = this
				uni.chooseImage({
				  count: 3,
				  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				  success(res) {
					  for(const tempFile of res.tempFiles){
						  CommonApi.upload([tempFile])
							  .then(file => {
								const path = file.url
								app.selectedCategories[app.curIndex].imgList.push({src:path})
								app.$emit('refreshComment',app.type,app.selectedCategories)
							  })
							  .catch((err) => {
								console.log(err)
						  })
					  }
					 
				  }
				});
			},
			removeImage(index){
				this.selectedCategories[this.curIndex].imgList.splice(index,1)
				this.$emit('refreshComment',this.type,this.selectedCategories)
			},
			processComment(category){
				if(this.type === "spot"){
					return {
						name:category.name,
						attractionsId:category.attractionsId,
						comment:"",
						imgList:[],
					}
				}else{
					return {
						label:category,
						comment:"",
					}
				}
			},
			isSelected(category){
				const index = this.selectedCategories.findIndex(selected => {
					if(selected.name){
						return selected.name === category.name
					} else{
						return selected.label === category
					}
				})
				return index === -1 ? 0 : index+1
			},
			changeScore(score){
				this.$emit("changeScore",score)
			},
		},
	}
	
</script>

<style lang="scss" scoped>
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 18px;
		font-weight: 600;
		color:#333;
	}
	
	.text--thirdary-dark{
		font-size: 16px;
		font-weight: 400;
		color:#333;
	}
	
	.text--thirdary-grey{
		font-size: 16px;
		font-weight: 400;
		color:#777;
	}
	
	.comment-input{
		@include border-four-roundings;
		border:1.5px solid #333;
		height:600rpx;
		padding:12px;
		
		gap:12px;
		
		&-question{
			
			
			.question-title{
				margin-bottom: 12px;
				display:inline-block;
			}
			
			.question-point{
				flex-wrap: wrap;
				gap:6px;
			}
			.question-point-item{
				@include border-four-roundings;
				padding:4px 6px;
				&.active{
					background-color: #333;
					color:#fff;
				}
			}
		}
		
		.comment-content-item{
			position:relative;
			height:60%;
			overflow:scroll;
			gap:12px;
			& .comment-input-content{
				gap:6px;
				
				textarea{
					height: 100%;;
				}
				
				.comment-input-images{
					gap:4px;
					width:100%;
					overflow:scroll;
					height:128rpx;
					image{
						border-radius: 4px;
						height:100%;
						flex-shrink: 0;
						flex-basis:156rpx;
					}
				}
			}
		} 
		
		.comment-score{
			gap:18px;
			align-items: center;
		}
		
		.comment-upload{
			justify-content: flex-end;
		}
		
		
	}
</style>